<template>
  <div>
    <p-row :gutter="12">
      <p-col class="" :span="8">
        <div class="col-box g-box-container">
          <div class="line1"></div>
          <div class="content">
            <div class="space">
              <span class="text">线索</span>
              <span class="num clr1">
                <span class="alone">{{ card.leadsByOpportunity }} </span>/{{
                  card.validLeads
                }}
              </span>
            </div>
            <div class="space">
              <div class="icon">
                <span class="icon-iner clor1"></span>
                <div class="opctiy">
                  <svg-icon type="clue" />
                </div>
                <!-- <p-icon class="opctiy clr1" type="cloud-sync" theme="filled"></p-icon> -->
              </div>
              <span class="describe">
                转商机线索数量/有效线索数量
              </span>
            </div>
          </div>
        </div>
      </p-col>
      <p-col class="" :span="8">
        <div class="col-box g-box-container">
          <div class="line2"></div>
          <div class="content">
            <div class="space">
              <span class="text">商机</span>
              <span class="num clr2">
                <span class="alone">{{ card.winQuantity }}</span>/{{ card.opportunityQuantity }}
              </span>
            </div>
            <div class="space">
              <p class="icon">
                <span class="icon-iner clor2"></span>
                <p-icon class="opctiy txt-clr2" type="property-safety" theme="filled"></p-icon>
              </p>
              <span class="describe">
                赢单数量/商机数量
              </span>
            </div>
          </div>
        </div>
      </p-col>
      <p-col class="" :span="8">
        <div class="col-box g-box-container">
          <div class="line3"></div>
          <div class="content">
            <div class="space">
              <span class="text">拜访</span>
              <span class="num clr3">
                <span class="alone">{{ card.completeVisit }}</span>/{{ card.visitQuantity }}
              </span>
            </div>
            <div class="space">
              <p class="icon icon-color3">
                <span class="icon-iner clor3"></span>
                <p-icon class="opctiy txt-clor3" type="contacts" theme="filled"></p-icon>
              </p>
              <span class="describe">
                已执行拜访数量/拜访数量
              </span>
            </div>
          </div>
        </div>
      </p-col>
    </p-row>
  </div>
</template>
<script>
export default {
  props: {
    card: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.col-box {
  width: 100%;
  height: 120px;
  .line1 {
    height: 4px;
    background: #ee6a77;
  }
  .line2 {
    height: 4px;
    background: #eeb459;
  }
  .line3 {
    height: 4px;
    background: #1740dc;
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    .space {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .text {
        font-size: 14px;
        font-weight: 400;
        color: #040c2c;
      }
      .clr1 {
        color: #ee6a77;
      }
      .clr2 {
        color: #efbb69;
      }
      .clr3 {
        color: #2e53df;
      }
      .txt-clor3 {
        color: #2b50dc;
      }
      .txt-clr2 {
        color: #edb151;
      }
      .icon {
        position: relative;
        width: 34px;
        height: 34px;
        align-self: flex-end;
        .icon-iner {
          display: block;
          width: 34px;
          height: 34px;
          border-radius: 18px;
          &.clor1 {
            background: #ee6a77;
            opacity: 0.1;
          }
          &.clor2 {
            background: #efbb69;
            opacity: 0.1;
          }
          &.clor3 {
            background: #2b50dc;
            opacity: 0.1;
          }
        }
        .opctiy {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 20px;
          transform: translate(-50%, -50%);
          // &.clr1 {
          //   color: #ee6a77;
          // }
          // &.clr2 {
          //   color: #eeb459;
          // }
          // &.clr3 {
          //   color: #1740dc;
          // }
        }
      }
      .num {
        font-size: 36px;
        font-weight: 500;
        // &.clr1 {
        //   color: #ee6a77;
        // }
        // &.clr2 {
        //   color: #eeb459;
        // }
        // &.clr3 {
        //   color: #1740dc;
        // }
        .alone {
          font-size: 36px;
          font-weight: 500;
          color: #040c2c;
        }
      }
      .describe {
        font-size: 12px;
        font-weight: 400;
        color: #040c2c73;
      }
    }
  }
}
</style>
